<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { Link, Search, Delete, Plus } from '@element-plus/icons-vue'
import { type CapCertify } from '@/api/cap'
import { getCertifyPage, delCertify, addCertify } from '@/api/cap'
import dayjs from 'dayjs'

const searchDto = reactive({
  account: '',
  type: '',
  pageNum: 1,
  pageSize: 10,
})
const tableData = ref<CapCertify[]>([])
const pagination = reactive({
  total: 0,
  pageSize: 10,
  currentPage: 1,
})

const clickSearchBtn = () => {
  searchDto.pageNum = 1
  getCertifyPage(searchDto).then((res) => {
    tableData.value = res.list
    pagination.total = res.total
  })
}

const clickDelBtn = (id: string) => {
  delCertify(id).then(() => {
    clickSearchBtn()
  })
}
onMounted(() => {
  clickSearchBtn()
})

const showDialog = ref(false)
const isAddForm = ref(true)
const dialogForm = reactive<CapCertify>({})

const clickAddBtn = () => {
  isAddForm.value = true
  dialogForm.type = 'vnc'
  showDialog.value = true
}

const clickSubDialogForm = () => {
  if (isAddForm.value) {
    addCertify({
      type: dialogForm.type,
      sourceId: '0',
      account: dialogForm.account,
      password: dialogForm.password,
      description: dialogForm.description,
    }).then(() => {
      clickSearchBtn()
      showDialog.value = false
    })
  }
}
</script>

<template>
  <div>
    <el-dialog v-model="showDialog" :title="isAddForm ? '添加凭证' : '更新凭证'" width="500">
      <el-form :model="dialogForm" label-width="auto" style="max-width: 600px">
        <el-form-item label="类型">
          <el-radio-group v-model="dialogForm.type">
            <el-radio value="rdp">RDP</el-radio>
            <el-radio value="vnc">VNC</el-radio>
            <el-radio value="sh">SH</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="dialogForm.description" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="dialogForm.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="dialogForm.password" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="clickSubDialogForm"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-card>
      <el-row class="mb-5">
        <el-col>
          <el-input
            v-model="searchDto.account"
            class="max-w-xs mr-5"
            placeholder="按IP信息过滤"
            style="width: 240px"
            clearable
          />
          <el-select
            v-model="searchDto.type"
            placeholder="按协议过滤"
            clearable
            class="mr-5"
            style="width: 140px"
          >
            <el-option label="VNC协议" value="vnc" />
            <el-option label="RDP协议" value="rdp" />
            <el-option label="SH协议" value="sh" />
          </el-select>
          <el-button type="primary" :icon="Search" @click="clickSearchBtn">查询</el-button>
          <el-button type="primary" :icon="Plus" @click="clickAddBtn">添加</el-button>
        </el-col>
      </el-row>

      <el-table :data="tableData" stripe style="width: 100%" show-overflow-tooltip>
        <el-table-column type="index" width="50" label="#" />
        <el-table-column prop="type" label="凭证类型" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="account" label="账号" />
        <el-table-column prop="creator" label="创建人" />
        <el-table-column label="创建时间">
          <template #default="scope">
            {{ dayjs(new Date(scope.row.createdAt * 1000)).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="80">
          <template #default="scope">
            <el-link :icon="Delete" type="primary" class="mr-3" @click="clickDelBtn(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt-5"
        layout="prev, pager, next"
        :hide-on-single-page="pagination.total / pagination.pageSize < 2"
        :total="pagination.total"
      />
    </el-card>
  </div>
</template>

<style scoped></style>
